<template>
  <div class="cr-tabel-title">
    <div class="cr-tabel-title-item" v-for="(item, i) in options.tabelTitle" :key="i">
      {{ t(item.name) }}
    </div>
  </div>
  <div @mousemove="testMove" @mouseleave="testMend" style="height: 100%">
    <div ref="roll" class="cr-list">
      <div
        :class="[striped && i % 2 == 1 ? 'list-striped' : '', 'cr-list-row']"
        v-for="(item, i) in virtualList"
        :key="item"
      >
        <div class="cr-list-row-item" v-for="(jtem, j) in options.tabelTitle" :key="j">
          {{ item[jtem.label] }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onBeforeUnmount, onUnmounted, onMounted } from 'vue';

  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  interface Props {
    step?: number;
    num?: number;
    options: any;
    striped?: boolean;
  }
  const props = withDefaults(defineProps<Props>(), {
    step: 50,
    num: 5,
    options: {},
    striped: true,
  });

  //定时器初始化
  let timer = ref<any>(null);
  //ref绑定初始化
  let roll = ref(null);
  //等同于vue2中的beforeDestroy
  onBeforeUnmount(() => {
    //清除定时器
    clearTimeout(timer.value);
  });
  //等同于vue2中的destroyed
  onUnmounted(() => {
    //清除定时器
    clearTimeout(timer.value);
  });

  /**
   * @Description: 鼠标移动事件
   * @Author: admin
   */
  function testMove() {
    clearTimeout(timer.value);
  }
  /**
   * @Description: 鼠标离开事件
   * @Author: admin
   */
  function testMend() {
    start();
  }
  //开启定时器方法
  function start() {
    //清除定时器
    clearTimeout(timer.value);
    //定时器触发周期
    let speed = ref(props.step);
    timer.value = setInterval(MarqueeTest, speed.value);
  }
  function MarqueeTest() {
    let test1: any = roll.value;
    // console.log(test1.offsetHeight);

    //判断组件是否渲染完成
    if (test1.offsetHeight == 0) {
      test1 = roll.value;
    } else {
      //如果列表数量过少不进行滚动
      if (test1.childNodes.length < props.num) {
        clearTimeout(timer.value);
        return;
      }
      //组件进行滚动

      const ratio = parseFloat((1 / window.devicePixelRatio).toFixed(2)) + 0.01;
      test1.scrollTop = test1.scrollTop + ratio;

      //判断滚动条是否滚动到底部
      if (test1.scrollTop >= test1.scrollHeight - test1.clientHeight) {
        //获取组件第一个节点
        let b = test1.childNodes[0];
        //删除节点
        test1.removeChild(b);
        //将该节点拼接到组件最后
        test1.append(b);
      }
    }
  }
  //vue2中在created中调用
  //vue3中 setup 包含beforeCreate和created
  //启动定时器
  // start();
  //注
  //示例中 listData 写的静态数据 可以直接调用start()
  //如果是接口获取 listData 列表时 需在 nextTick 中调用 start()；否则，
  //进入页面不会滚动 必须鼠标移入移出才会滚动
  //用nextTick 的原因是 需要等dom元素加载完毕后 再执行方法
  let realList = ref<Array<any>>([]);
  let current = ref<number>(0);
  let virtualList = ref<Array<any>>([]);

  async function getList() {
    current.value++;
    const res: any = await props.options.api({ CurrentPage: current.value, PageSize: 10 });
    // console.log(res);
    if (virtualList.value.length == 0) {
      virtualList.value = new Array(res.Count).fill('');
      start();
    }
    res.Items.forEach((item) => {
      realList.value.push(item);
    });
    virtualList.value.forEach((_, i) => {
      virtualList.value[i] = realList.value[i] ? realList.value[i] : '';
    });
    if (realList.value.length < res.Count) {
      getList();
    }
  }

  onMounted(() => {
    getList();
  });
</script>

<style lang="less" scoped>
  .cr-tabel-title {
    width: 100%;
    background: #fafafa;
    height: 50px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #f1f1f1;

    &-item {
      line-height: 50px;
      height: 50px;
      flex: 1;
      text-align: center;
      position: relative;
    }
  }

  .cr-tabel-title-item:not(.cr-tabel-title-item:last-child)::before {
    position: absolute;
    top: 50%;
    right: 0px;
    width: 1px;
    height: 1.6em;
    background-color: #0000000f;
    transform: translateY(-50%);
    transition: background-color 0.3s;
    content: '';
  }

  .cr-list {
    width: 100%;
    height: 300px;
    overflow: hidden;

    &-row {
      display: flex;
      height: 50px;
      justify-content: space-around;
      line-height: 50px;
      background: #fff;

      &-item {
        flex: 1;
        padding-left: 10px;
        box-sizing: border-box;
        text-align: center;
        // background: #fff;
      }

      // &-item:hover {
      //   background: #fafafa;
      // }
    }

    &-row:hover {
      background: #fafafa;
    }
  }

  .list-striped {
    background: #fafafa;
  }

  html[data-theme='dark'] {
    .cr-tabel-title {
      background: #1d1d1d;
      border-bottom: 1px solid #151515;
    }

    .cr-list-row {
      background: #151515;
    }

    .list-striped {
      background: #1d1d1d;
    }
  }
</style>
